<template>
  <div class="safeNav">
    <nav-header :user="user_name"></nav-header>
    <div class="middle">
      <div class="leftMenu">
        <left-menu></left-menu>
      </div>
      <div class="rightMenu">
        <div class="right-top">安全中心</div>
        <div class="form">
          <el-form
            :model="ruleForm2"
            status-icon
            :rules="rules2"
            ref="ruleForm2"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="请输入新密码" prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="再次确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
              <el-button @click="resetForm('ruleForm2')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navHeader from "./../components/NavHeader";
import leftMenu from "@/components/leftMenu";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user_name: "",
      ruleForm2: {
        pass: "",
        checkPass: ""
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  components: {
    navHeader,
    leftMenu
  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm2.pass);
      // console.log(this.$refs[formName].validate)
      //   this.$refs[formName].validate(valid => {
      //     if (valid) {
      //         console.log(valid)
      //     //   alert("submit!");
      //     } else {
      //       console.log("error submit!!");
      //       return false;
      //     }
      //   });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    // console.log(this.$route.query);
    var user = this.$route.query.use;
    if (user) {
      this.user_name = user;
    }
    // console.log(this.user_name);
  }
};
</script>
<style lang='scss' scoped>
.safeNav {
  height: 100%;
  .middle {
    height: calc(100% - 50px);
    display: flex;
    justify-content: flex-start;
    .leftMenu {
      height: 100%;
    }
    .rightMenu {
      width: 100%;
      background: #fff;
      .right-top {
        width: 100%;
        height: 80px;
        background: #e0e0e0;
        line-height: 80px;
        font-weight: bold;
        line-height: 80px;
        font-size: 20px;
        padding-left: 30px;
        letter-spacing: 10px;
      }
      .form {
        width: 380px;
        margin-top: 20px;
        margin-left: 20px;
      }
    }
  }
}
</style>